<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <a-spin :spinning="saveing" tip="时间有点长，请耐性等待...">
    <page-header-wrapper :title="false" content="logstash版本管理">
      <a-card :body-style="{padding: '24px 32px'}" :bordered="false" v-show="showList">
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="showList = false">上 传</a-button>
        </div>
        <a-table
          ref="table"
          size="default"
          rowKey="key"
          :columns="columns"
          :data-source="dataList"
          :alert="true"
          showPagination="auto"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span slot="host" slot-scope="host">
            <a-tag
              v-for="tag in host.split(',')"
              :key="tag"
              color="green"
            >
              {{ tag }}
            </a-tag>
          </span>

          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleDelete(record)">删 除</a>
            </template>
          </span>
        </a-table>
      </a-card>

      <a-card :body-style="{padding: '24px 32px'}" :bordered="false" v-show="!showList">
        <a-form @submit="handleSubmit" :form="form">
          <a-form-item
            label="logstash版本号"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
              v-decorator="[
                'version',
                {rules: [{ required: true, message: '请输入logstash版本号' }]}
              ]"
              name="version"
              placeholder="logstash版本号"/>
          </a-form-item>
          <a-form-item
            label="upload（tar.gz, zip）"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-upload
              :file-list="fileList"
              :multiple="false"
              :remove="removeFile"
              :before-upload="beforeUpload">
              <a-button>
                <a-icon type="upload"/>
                Select File
              </a-button>
            </a-upload>
          </a-form-item>
          <a-form-item
            :wrapperCol="{ span: 24 }"
            style="text-align: center"
          >
            <a-button htmlType="submit" type="primary">提交</a-button>
            <a-button style="margin-left: 8px" @click="showList = true">返回</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </page-header-wrapper>
  </a-spin>
</template>

<script>
  import { upload, getVersionList } from '@/api/logstash'

  const columns = [
    {
      title: '#',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '版本号',
      dataIndex: 'logstash_version'
    },
    {
      title: 'host',
      dataIndex: 'host',
      scopedSlots: { customRender: 'host' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]

  export default {
    name: 'LogstashPackage',
    data () {
      this.columns = columns
      return {
        form: this.$form.createForm(this),
        showList: true,
        dataList: [],
        fileList: [],
        saveing: false
      }
    },
    methods: {
      loadData () {
        const me = this
        getVersionList().then(res => {
          console.log(res.code, res.data)
          if (res.code === 200) {
            me.dataList = res.data
            console.log(me.dataList)
          }
        })
      },
      beforeUpload (file) {
        if(!file.name.endsWith(".tar.gz") && !file.name.endsWith(".zip")){
          this.$warning({
            title: '提示',
            content: '请上传tar.gz或zip格式的文件',
          });
          return false
        }
        this.fileList = [file]
        return false
      },
      removeFile (file) {
        this.fileList = []
      },
      handleAdd () {
      },
      handleDelete (record) {
        alert('暂未实现')
      },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            if (this.fileList.length < 1) {
              this.$message.error('请选择logstash包')
            } else {
              const formData = new FormData()
              const file = this.fileList[0]
              if(file.name.endsWith(".tar.gz")){
                formData.append('fileType', ".tar.gz")
              }else{
                formData.append('fileType', ".zip")
              }
              formData.append('files[]', file)
              formData.append('logstashVersion', values.version)
              this.saveing = true
              upload(formData).then(res => {
                if (res.code === 200) {
                  this.loadData();
                  this.showList = true
                  this.saveing = false
                }
              })
            }
          }
        })
      }
    },
    mounted () {
      this.loadData()
    }
  }
</script>
